<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'email', order: 'location' }">
      <el-table-column prop="id" label="id" sortable width="180">
      </el-table-column>
      <el-table-column prop="username" label="用户名" sortable width="300">
      </el-table-column>
      <el-table-column prop="login_time" label="最近登录时间" sortable width="300">
      </el-table-column>
      <el-table-column prop="location" label="区域" sortable width="300">
      </el-table-column>
      <el-table-column prop="ip_address" label="ip" sortable width="300">
      </el-table-column>
      <!-- <el-table-column prop="is_online" label="在线状态" sortable width="%50"> -->
      <!-- </el-table-column> -->
      <el-table-column prop="is_online" label="在线状态" sortable width="300">
        <template slot-scope="scope">
          <!-- 根据is_online字段的值显示不同内容 -->
          <span v-if="scope.row.is_online">在线</span>
          <span v-else>离线</span>
        </template>

      </el-table-column>

    </el-table>
    <el-pagination background layout="prev, pager, next" 
    @current-change="handleCurrentChange"
            :current-page="params.page"
    :total="100">

    </el-pagination>
  </div>
</template>
  
<script>
import { getUserLog } from '@/api/user'
export default {


  data() {
    return {
      tableData: [],
      // userlogForm: {
      //   username: '',
      //   location:'',
      //   ip_address:'',
      //   login_time:'',
      //   is_online: '',
      // },
      params:{
                'page': 1,
                'page_size':10,
                'search':''
            },
      total: 0
    }
  },
  mounted() {
    this.getUserLog()
  },
  methods: {
    handleCurrentChange(page) {
            console.log(`当前页: ${page}`);
            this.params.page = page;
            this.getUserLog()

        },
    getUserLog() {
      getUserLog(this.params).then(response => {
        this.tableData = response.data.results
        this.total = response.data.count

        // this.total = this.tableData.length
      })
    },

  }
}
</script>
  